<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>事件修饰符</title>
        <style>
            .box1{
                width: 300px;
                height: 300px;
                background: pink;
            }
            .box2{
                width: 200px;
                height: 200px;
                background: skyblue;
            }
            .box3{
                width: 100px;
                height: 100px;
                background: orange;
            }
        </style>
        <!-- 引入Vue -->
        <script type="text/javascript" src="../js/vue.js"></script>
    </head>
    <body>
        <!-- 准备好一个容器-->
        <div id="demo">
            <!-- 阻止默认行为 -->
            <form action="http://www.atguigu.com">
                <button @click.prevent='prevent'>点击阻止默认行为</button>
            </form>
            <!-- 阻止冒泡 -->
            <div @click='show1' class="box1">
                <div @click.stop='show2' class="box2">
                    <div @click.stop='show3' class="box3"></div>
                </div>
            </div>
        </div>
    </body>

    <script type="text/javascript">
        //阻止 vue 在启动时生成生产提示。
        Vue.config.productionTip = false
        new Vue({
            el: '#demo',
            data: {
            },
            // 事件的回调
            methods:{
                prevent(){
                    alert('需要阻止默认行为')
                },
                show1(){
                    alert('我是box1')
                },
                show2(){
                    alert('我是box2')
                },
                show3(){
                    alert('我是box3')
                },
            },
            // 计算属性
            computed:{
            },
            // 监视属性
            watch:{
            }
        })
    </script>
</html>